"use client"

import AppQrImgUrl from './assets/app-qr.png'
import LogoImgUrl from './assets/logo.webp'
import AppleImgUrl from './assets/apple.webp'
import GoogleImgUrl from './assets/google.webp'
import IntroVideoUrl from "./assets/intro.mp4"
import FeatureCard from './FeatureCard'
import { getFeatureListByLanguage } from '../config'
import { getTranslation } from "../../../locales/translations";

export default function Page({ lang }) {
    const featureList = getFeatureListByLanguage({ lang })
    const t = (key) => getTranslation(key, lang);
    return (
        <div className="h-full bg-white">
            <div className="hidden md:block mx-auto w-full">
                <div className="bg-[#F5F5F5] md:py-16 py-8 md:px-2 px-6 min-h-[18rem]">
                    <div className="max-w-5xl mx-auto space-y-6">
                        <p className="text-3xl font-bold">{t('appAndServices.downloadICam365App')}</p>
                        <div className='flex space-x-6'>
                            <img src={LogoImgUrl} alt="logo" className="w-[25%] md:w-32" />
                            <img src={AppQrImgUrl} alt="QR Code" className="w-[25%] md:w-32" />
                            <div className='hidden md:flex flex-col space-y-2 justify-center w-[30%] md:w-auto overflow-x-auto'>
                                <div className='p-2 py-1 pr-20 bg-white flex items-center rounded-lg font-bold' onClick={() => window.open('https://apps.apple.com/cn/app/icam365/id1444978112')}>
                                    <img src={AppleImgUrl} alt="Apple Store" className="w-12 h-12" />
                                    <span>{t('appAndServices.appStore')}</span>
                                </div>
                                <div className='p-2 py-1 pr-20 bg-white flex rounded-lg items-center font-bold' onClick={() => window.open('https://play.google.com/store/apps/details?id=com.tange365.icam365&pli=1')}>
                                    <img src={GoogleImgUrl} alt="Google Play" className="w-12 h-12" />
                                    <span>{t('appAndServices.googlePlay')}</span>
                                </div>
                            </div>
                        </div>
                        <div className='md:hidden flex-col space-y-2 justify-center w-[50%] md:w-auto overflow-x-auto'>
                            <div className='p-2 py-1 bg-white flex items-center font-bold' onClick={() => window.open('https://apps.apple.com/cn/app/icam365/id1444978112')}>
                                <img src={AppleImgUrl} alt="Apple Store" className="w-12 h-12" />
                                <span>{t('appAndServices.appStore')}</span>
                            </div>
                            <div className='p-2 py-1 bg-white flex items-center font-bold' onClick={() => window.open('https://play.google.com/store/apps/details?id=com.tange365.icam365&pli=1')}>
                                <img src={GoogleImgUrl} alt="Google Play" className="w-12 h-12" />
                                <span>{t('appAndServices.googlePlay')}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="block md:hidden mx-auto w-full">
                <div className="bg-[#F5F5F5] md:py-16 py-8 md:px-2 px-6 min-h-[18rem]">
                    <div className="max-w-5xl mx-auto space-y-6 flex flex-col items-center justify-center">
                        <img src={LogoImgUrl} alt="logo" className="w-16" />
                        <p className="text-lg font-bold">{t('appAndServices.downloadICam365App')}</p>
                        <div className='flex-col text-sm space-y-2 justify-center w-[100%] rounded-lg md:w-auto overflow-x-auto'>
                            <div className='p-2 py-1 bg-white flex items-center rounded-lg font-bold' onClick={() => window.open('https://apps.apple.com/cn/app/icam365/id1444978112')}>
                                <img src={AppleImgUrl} alt="Apple Store" className="w-12 h-12" />
                                <span>{t('appAndServices.appStore')}</span>
                            </div>
                            <div className='p-2 py-1 bg-white flex items-center rounded-lg font-bold' onClick={() => window.open('https://play.google.com/store/apps/details?id=com.tange365.icam365&pli=1')}>
                                <img src={GoogleImgUrl} alt="Google Play" className="w-12 h-12" />
                                <span>{t('appAndServices.googlePlay')}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="max-w-5xl mx-auto md:py-12 py-2 md:px-2 px-6 pb-6">
                <p className='text-base md:text-2xl md:font-bold py-6'>{t('appAndServices.introductionAppServices')}</p>
                <div className='space-y-4'>
                    {featureList.map((feature, index) => { return <FeatureCard key={index} feature={feature} /> })}
                </div>
                <div class="pt-12 space-y-8 font-bold text-3xl">
                    <p>{t('appAndServices.videoIntroDesc')}</p>
                    <video autoPlay loop playsInline controls >
                        <source src={IntroVideoUrl} type="video/mp4" />
                        Your browser does not support the video tag.
                    </video>
                </div>
            </div>
        </div>
    )
}
